<html>
    <head>
        <meta charset='utf-8'>
        <title>bdc</title>
        <style>
            .big_txt { font-size: 180%; }
            .small_txt { font-size: 100%; }
            .middle { margin:0 auto; }
            .content { width:380px; height:100px; }
            .small_content { width:380px; height: 40px; }
            #select_div,#button_div{ width:450px; height: 50px; margin-top: 32px; }
            .btn_cls { margin-left: 10px; margin-right: 10px; }
            #progress_text { text-align:center; }
        </style>
        <script type="text/javascript" src="res/common.js"></script>
        <script type="text/javascript" src="res/list.js"></script>
        <script type="text/javascript" src="res/get_word.js"></script>
    </head>
    <body>
        <div id="select_div" class="middle">
            <select id="book_select" ></select>
            <select id="lesson_type_select" ></select>
            <select id="lesson_select"></select>
            <button id="start_button" onclick="onStartClick()">Start</button>
        </div>

        <div id="word_div" class="middle content">
            <p id="word" class="big_txt"></p>
        </div>
        <div id="pnc_div" class="middle content">
            <p id="pnc" class="big_txt"></p>
        </div>
        <div id="mean_div" class="middle content">
            <p id="mean" class="big_txt"></p>
        </div>
        <div id="hint_div" class="middle small_content">
            <p id="hint" class="small_txt"></p>
        </div>
        <div id="button_div" class="middle">
            <button id="ok_button" class="btn_cls" onclick="onOkClick()" disabled="true">OK<br>←</button>
            <button id="show_button" class="btn_cls" onclick="onShowClick()" disabled="true">Show<br>空格</button>
            <button id="no_ok_button" class="btn_cls" onclick="onNoOkClick()" disabled="true">No OK<br>→</button>
            <button id="ok_ok_button" class="btn_cls" onclick="onOkOkClick()" disabled="true">Known<br>回车</button>
        </div>
        <div id="progress_div" class="middle content">
            <p id="progress_text"></p>
        </div>
    </body>
    <script>
        g_books_short_info = null;
        g_get_word = null;
        g_cur_word_info = null;
        g_cur_show_type = null;
        g_total_word_count = 0;
        g_known_word_count = -1;
        g_ok_button = document.getElementById('ok_button');
        g_show_button = document.getElementById('show_button');
        g_no_ok_button = document.getElementById('no_ok_button');
        g_ok_ok_button = document.getElementById('ok_ok_button');

        function onStartClick() {
            document.getElementById('start_button').disabled = true;
            var book_id = document.getElementById('book_select').selectedOptions[0].value;
            var book_idx = document.getElementById('book_select').selectedIndex;
            var lesson_type = document.getElementById('lesson_type_select').selectedOptions[0].value;
            var type_idx = document.getElementById('lesson_type_select').selectedIndex;
            var lesson_id = document.getElementById('lesson_select').selectedOptions[0].value;
            var lesson_idx = document.getElementById('lesson_select').selectedIndex;
            window.localStorage.setItem('SELECT_IDXS', '' + book_idx + ',' + type_idx + ',' + lesson_idx)
            var url = '/service/get_lesson_content?book_id=' + book_id 
                    + '&lesson_type=' + lesson_type
                    + '&lesson_id=' + lesson_id;
            getUrlAsyn(url, onGetLessonContentFinish);
        }

        function onGetLessonContentFinish(result) {
            result = JSON.parse(result);
            g_total_word_count = result.length;
            g_get_word = new GetWord(result);
            var ret = g_get_word.get();
            g_cur_word_info = ret[0];
            g_cur_show_type = ret[1];
            showWord(g_cur_word_info, g_cur_show_type);
            incProgress();
        }

        function onGetBooksInfoFinish(result) {
            g_books_short_info = {}
            var book_select = document.getElementById('book_select');
            var lesson_type_select = document.getElementById('lesson_type_select');
            result = JSON.parse(result);
            result.forEach(short_info => {
                // 给book_select添加选项
                var opt = document.createElement('option');
                opt.value = short_info.book_id;
                opt.text = short_info.book_name;
                book_select.appendChild(opt);
                // 把当前short_info转换成map存入g_books_short_info
                g_books_short_info[short_info.book_id] = {};
                if('words' in short_info) {
                    g_books_short_info[short_info.book_id].words = short_info.words;
                }
                if('sentenses' in short_info) {
                    g_books_short_info[short_info.book_id].sentenses = short_info.sentenses;
                }
                if('grammas' in short_info) {
                    g_books_short_info[short_info.book_id].grammas = short_info.grammas;
                }
            });
            // 更新三个select的内容
            var history_selects = window.localStorage.getItem('SELECT_IDXS');
            var book_idx = 0, type_idx = 0, lesson_idx = 0;
            if(history_selects != null) {
                history_selects = history_selects.split(',');
                book_idx = Number(history_selects[0]);
                type_idx = Number(history_selects[1]);
                lesson_idx = Number(history_selects[2]);
            }
            book_select.selectedIndex = book_idx;
            onBookSelectChange(type_idx, lesson_idx);
            book_select.onchange = onBookSelectChange;
            lesson_type_select.onchange = onLessonTypeSelectChange;
        }

        function onBookSelectChange(type_idx=0, lesson_idx=0) {
            var lesson_type_select = document.getElementById('lesson_type_select');
            var book_id = document.getElementById('book_select').selectedOptions[0].value;
            lesson_type_select.options.length = 0;
            for(let lesson_type in g_books_short_info[book_id]) {
                var opt = document.createElement('option');
                opt.value = lesson_type;
                opt.text = lesson_type;
                lesson_type_select.appendChild(opt);
            }
            lesson_type_select.selectedIndex = type_idx;
            onLessonTypeSelectChange(lesson_idx);
        }

        function onLessonTypeSelectChange(lesson_idx) {
            var book_id = document.getElementById('book_select').selectedOptions[0].value;
            var lesson_type = document.getElementById('lesson_type_select').selectedOptions[0].value;
            var lesson_select = document.getElementById('lesson_select');
            lesson_select.options.length = 0;
            g_books_short_info[book_id][lesson_type].forEach(item => {
                var opt = document.createElement('option');
                opt.value = item[0];
                opt.text = item[1];
                lesson_select.appendChild(opt);
            });
            lesson_select.selectedIndex = lesson_idx;
        }

        function getAndShowWord() {
            var word = g_get_word.get();
            if(word == null) {
                finishStudy();
                return;
            }
            g_cur_word_info = word[0];
            g_cur_show_type = word[1];
            this.showWord(g_cur_word_info, g_cur_show_type);
        }

        function showWord(word_info, show_type) {
            if(show_type == GW_SHOWTYPE_W) {
                document.getElementById('word').textContent = word_info[GW_WORDINFO_WORD];
                document.getElementById('pnc').textContent = '';
                document.getElementById('mean').textContent = '';
                document.getElementById('hint').textContent = '';
            }
            else if(show_type == GW_SHOWTYPE_P) {
                document.getElementById('word').textContent = '';
                document.getElementById('pnc').textContent = '[' + word_info[GW_WORDINFO_PNC_NUM] + '] ' + word_info[GW_WORDINFO_PNC];
                document.getElementById('mean').textContent = '';
                document.getElementById('hint').textContent = '';
            }
            else if(show_type == GW_SHOWTYPE_M) {
                document.getElementById('word').textContent = '';
                document.getElementById('pnc').textContent = '';
                document.getElementById('mean').textContent = word_info[GW_WORDINFO_MEAN];
                document.getElementById('hint').textContent = '';
            }
            else {
                document.getElementById('word').textContent = word_info[GW_WORDINFO_WORD];
                document.getElementById('pnc').textContent = '[' + word_info[GW_WORDINFO_PNC_NUM] + '] ' + word_info[GW_WORDINFO_PNC];
                document.getElementById('mean').textContent = word_info[GW_WORDINFO_MEAN];
                document.getElementById('hint').textContent = word_info[GW_WORDINFO_HINT];
            }
            document.getElementById('ok_button').disabled = true;
            document.getElementById('no_ok_button').disabled = true;
            document.getElementById('ok_ok_button').disabled = true;
            document.getElementById('show_button').disabled = false;
        }

        function onOkClick() {
            var is_known = g_get_word.update(g_cur_word_info[GW_WORDINFO_ID], g_cur_show_type, true);
            if(is_known == true) {
                incProgress();
            }
            getAndShowWord();
        }

        function onNoOkClick() {
            g_get_word.update(g_cur_word_info[GW_WORDINFO_ID], g_cur_show_type, false);
            getAndShowWord();
        }

        function onOkOkClick() {
            g_get_word.set_word_all_ok(g_cur_word_info[GW_WORDINFO_ID]);
            incProgress();
            getAndShowWord();
        }

        function onShowClick() {
            this.showWord(g_cur_word_info, GW_SHOWTYPE_ALL);
            document.getElementById('ok_button').disabled = false;
            document.getElementById('no_ok_button').disabled = false;
            document.getElementById('ok_ok_button').disabled = false;
            document.getElementById('show_button').disabled = true;
        }

        function finishStudy() {
            alert('all done!');
            document.getElementById('start_button').disabled = false;
            document.getElementById('word').textContent = '';
            document.getElementById('pnc').textContent = '';
            document.getElementById('mean').textContent = '';
            g_known_word_count = -1;
        }

        function incProgress() {
            g_known_word_count += 1;
            var txt = g_known_word_count + '/' + g_total_word_count;
            document.getElementById('progress_text').textContent = txt;
        }

        getUrlAsyn('/service/get_books_short_info', onGetBooksInfoFinish);

        document.addEventListener('keydown', (event) => {
            const key_name = event.key;
            if(key_name == 'ArrowLeft') {
                if(g_ok_button.disabled != true) {
                    onOkClick();
                }
                return;
            }
            if(key_name == 'ArrowRight') {
                if(g_no_ok_button.disabled != true) {
                    onNoOkClick();
                }
                return;
            }
            if(key_name == 'ArrowUp' 
            || key_name == 'ArrowDown'
            || key_name == ' ') {
                if(g_show_button.disabled != true) {
                onShowClick();
                }
                return;
            }
            if(key_name == 'Enter') {
                if(g_ok_ok_button.disabled != true) {
                    onOkOkClick();
                }
            }
        });
    </script>
</html>
